<template>
	<div style=" background-color: #171717; height: 100%;width: 100%; color: #fff;">
		<div style="font-size: 30px; font-weight: 500; padding: 30px;color: #fff;">选择套餐</div>
		<div v-html="this.area_document" style="padding: 30px;"></div>
		<div class="mb_goods" ref="scrollContainer">
			<div v-for="(item , index) in mb_goods" v-bind:key="index" class="mb_robot"
				:class="{'mb_over':index === selectedIndex}" @mouseover="over(index)" @mouseout="out(index)"
				@click="to_goods_details(item.id)">
				<div
					style="margin: 10px 0;font-size: 16px;font-weight:bold;font-size:19px;margin-left: 20px;white-space: pre-line;">
					{{item.packageName}}
				</div>
				<div
					style="width: 80%; margin: 0 auto;display: flex;flex-wrap: wrap; font-size: 16px;white-space: pre-line;">
					<div style="width: 100%; margin: 10px 0;">
						• &nbsp;CPU:{{item.cpu}}
					</div>
					<div style="width: 100%; margin-bottom: 10px;white-space: pre-line;">• &nbsp;内存:{{item.memory}}
					</div>
					<div style="width: 100%;margin-bottom: 10px;white-space: pre-line;">• &nbsp;带宽:{{item.bandwidth}}
					</div>
					<div style="width: 100%;margin-bottom: 10px;white-space: pre-line;">• &nbsp;硬盘:{{item.hardDisk}}GB
					</div>
					<div style="width: 100%;margin-bottom: 10px;white-space: pre-line;">• &nbsp;{{item.safe}}</div>
					<div style="width: 100%;">• <block style="color: red;">&nbsp;{{item.grade}}</block>
					</div>
					<div style="font-size: 15px;position: relative;top: 25px;">库存：{{item.inventory}}</div>
				</div>
				<div
					style="margin-top: 35px;margin-left: 25px ; vertical-align: bottom;display: flex;align-items: center;">
					<div style=" color: red;font-size: 30px;font-weight: 700;margin-right: 5px;">
						{{item.priceMonth}}
					</div>
					<div style="font-size: 14px; color: #fff;height: 100%;font-weight: 700;">元/月起</div>
				</div>
				<div class="buy_mb" :class="{'buy_over':index === selectedIndex}">
					<div class="buy_button" @click="toConfigure(item)">立即购买</div>
				</div>
			</div>
		</div>
	</div>
</template>



<script>
	import axios, {
		Axios
	} from 'axios';
	import {
		getAllMbData
	} from '../../api/work.js'
	export default {
		data() {
			return {
				mb_goods: [],
				area_document: ""
			}
		},
		mounted() {
			// this.$refs.scrollContainer.addEventListener('wheel', this.handleScroll);
			// window.addEventListener('scroll', this.handleScroll)
			this.area_document = this.$route.query.data.document
			this.getAllMbGoods(this.$route.query.data);
		},
		beforeDestroy() {
			this.$refs.scrollContainer.removeEventListener('wheel', this.handleScroll);
			window.removeEventListener('scroll', this.handleScroll)
		},
		methods: {
			goAnchor(id) {
				var anchor = document.getElementById(id);
				anchor.scrollIntoView();
			},
			handleScroll(event) {
				event.preventDefault(); // 阻止默认滚动行为
				const scrollContainer = this.$refs.scrollContainer;
				const scrollLeft = scrollContainer.scrollLeft;
				const scrollWidth = scrollContainer.scrollWidth;
				const clientWidth = scrollContainer.clientWidth;

				if (event.deltaY < 0) {
					// 向上滚动
					if (scrollLeft > 0) {
						scrollContainer.scrollLeft -= 40; //
					} else {
						scrollContainer.scrollLeft = 0;
					}
				} else {
					// 向下滚动
					if (scrollLeft + clientWidth < scrollWidth) {
						scrollContainer.scrollLeft += 40
					} else {
						scrollContainer.scrollLeft = scrollWidth - clientWidth;
					}
				}
			},
			over(index) {
				this.selectedIndex = index;
				this.is_mb_over = true
				this.is_buy_over = true
			},
			out(index) {
				this.selectedIndex = false;
				this.is_mb_over = false
				this.is_buy_over = false

			},
			toNext() {
				this.$router.push('/demo/goods_2')
			},
			// 获取所有模板数据
			getAllMbGoods(e) {
				let data = {
					areaId: e.id
				}
				getAllMbData(data).then(res => {

					// 请求成功，处理返回的数据
					this.mb_goods = res
					console.log(this.mb_goods)
					for (let i = 0; i < this.mb_goods.length; i++) {
						this.mb_goods[i].areaName = e.areaName
					}
					console.log(this.mb_goods)
				}).catch(error => {
					// 请求失败，处理错误信息
					this.error = error;
				});
			},
			toConfigure(e) {
				// 建阳是否登录
				if (localStorage.getItem("LZY-TOKEN") == null) {
					this.JudgingLogin()
					return
				}

				console.log("检验库存" + e)
				if (e.inventory <= 0) {
					this.$message.info("没有库存啦，没有库存啦，太火爆啦")
					return
				}
				// this.$router.push('/demo/mb_goods_details')
				this.$router.push({
					path: '/demo/mb_goods_details',
					query: {
						id: e.id,
						type: 0,
						serverType: e.servertype,
					}
				})
			},
			// 判断登录
			JudgingLogin() {
				console.log("登录信息")
				console.log(localStorage.getItem("LZY-TOKEN"))
				// 弹出提示框 ，请先登录
				if (localStorage.getItem("LZY-TOKEN") == null) {
					this.openLoginMessage()
				}
			},
			openLoginMessage() {
				this.$alert('还未登录，请先登录！', '登录提醒', {
					confirmButtonText: '确定',
					callback: action => {
						this.$router.push({
							path: '/login',
						})
					}
				});
			}

		}
	}
</script>

<style scoped>
	* {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}


	.mb_robot {
		display: inline-block;
		width: 20%;
		/* height: 90%; */
		border-radius: 10px;
		margin: 2.5%;
		/* margin-right: 40px; */
		background-color: #f6f8fb;
		font-size: 13px;
		font-weight: 31.25rem;
		position: relative;
		box-shadow: 0 0 2px #888888;
		background: #212121;
	}

	.mb_goods {
		width: 100%;
		font-size: 30px;
		font-weight: 500;
		display: flex;
		height: 79vh;
		flex-wrap: wrap;
		/* margin: 30px; */
		padding: 10px;
		overflow: scroll;
		/* overflow-x: auto; */
		white-space: nowrap;
	}

	.mb_goods::-webkit-scrollbar {
		display: none;
		/* 隐藏默认的滚动条 */
	}


	.buy_button {
		margin-left: 50%;
		margin-top: 35px;
		margin-bottom: 10px;
		display: flex;
		width: 30%;
		background: linear-gradient(144deg, #af40ff, #5b42f3 50%, #00ddeb);
		border: none;
		height: 33px;
		padding: 0 15px 0 15px;
		border-radius: 0.5rem !important;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-family: 'Avalors Personal Use';
		letter-spacing: 5px;
		color: #FFFFFF;
		text-shadow: 0 0 4px white;
		cursor: pointer;
	}
</style>